<template>
    <div> 
      <div class="list" v-for="(item,index) of list" :key="index">
          <div>
            {{item.title}}
          </div>
         <div  v-if="item.children" class="child">
            <detail-list :list="item.children" ></detail-list>
         </div>
      </div>
    </div>
</template>

<script> 
  export default {
    name: 'DetailList',
    props: {
      list: Array
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="stylus" scoped>
 .child{
   padding: 10px 
 }
</style>
